<template>
  <div class="venus-list-page">
    <!--签约查询界面-->
    <div class="page-search">
      <el-form label-width="160px" style="margin: 20px 50px 20px 0px;" size="mini">
        <el-row type="flex" class="list-items">
          <el-col :span="8">
            <el-form-item label="产品名称:">
              <el-select v-model="table.prod_doc_table.prod_code" class="venus-input-middle" filterable clearable placeholder="--请选择--">
                <el-option v-for="item in dict.prodCode" :label="item.prod_name" :value="item.prod_code" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="产品状态:">
              <el-select v-model="table.prod_doc_table.run_stat" class="venus-input-middle" filterable clearable placeholder="--请选择--">
                <el-option v-for="(value,key,index) in dict.runStat" :key="index" :label="value" :value="key" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div class="venus-btn-box" style="text-align: center;">
            <el-button type="success" @click="search">查询</el-button>
            <el-button type="info" plain @click="resetForm">重置</el-button>
          </div>
        </el-row>
      </el-form>
    </div>
    <!--    查询列表返显-->
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">查询结果</div>
      </el-row>
      <table-pagination :table-data="table.prod_doc_table.tableData" :table-header-config="table.tableHeaderConfig"
        highlight-current-row :total="table.prod_doc_table.total" :page-size="table.prod_doc_table.limit" :now-page="table.prod_doc_table.nowPage"
        :operation-config="table.operationConfig" @current-change="handleCurrentChange" />
    </div>

    <el-dialog title="可下载模板列表" :visible.sync="table.downloadList_dialog.dialogTableVisible" v-dialogDrag>
      <el-table :data="table.download_table.gridData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column property="temp_type_name" label="模板类型" width="150"></el-table-column>
        <el-table-column property="temp_name" label="模板名称" width="150"></el-table-column>
        <el-table-column align="center" label="操作" width="300">
                  <template slot-scope="scope">
                      <el-button type="success" size="mini" @click="download(scope.row)">下载
                        </el-button>
                      <el-button type="success" size="mini" @click="showEcharts(scope.row)">展示Echarts图表
                        </el-button>
                    </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="success" @click="batchDownload()">打包下载</el-button>
        <el-button type="info" @click="table.downloadList_dialog.dialogTableVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import * as kk from '@/utils/k-utils'
  import '@/utils/directives'
  export default {
    name: 'BondInfo',
    data() {
      return {
        table: {
          operationConfig: { // 表格操作配置
            fixed: 'left',
            width: 220,
            operationButton: [
              // 每一个操作。value:操作文字；func:回调函数
              {
                value: '产品普通文档',
                func: this.PTDocument
              },
              {
                value: '产品中债文档',
                func: this.ZZDocument
              }
            ]
          },
          tableHeaderConfig: [ // 表头配置
            {
              prop: 'prod_name',
              label: '产品名称'
            },
            {
              prop: 'prod_code',
              label: '产品代码'
            },
            {
              prop: 'establish_date',
              label: '起始日期'
            },
            {
              prop: 'end_date',
              label: '到期日期'
            },
            {
              prop: 'invest_object',
              label: '投组对象'
            },
            {
              prop: 'expe_scale',
              label: '预期募集金额(元)'
            },
            {
              prop: 'income_type',
              label: '收益特点'
            },
            {
              prop: 'run_stat',
              label: '产品状态'
            }
          ],
          prod_doc_table: {
            limit: 5,
            total: 0,
            nowPage: 0,
            tableData: [], // 表格数据
            exeid: 'QUERYPRODINFOWITHDOC',
            //查询参数
            prod_code: '',
            run_stat: ''
          },
          download_table: {
            gridData: [{
              temp_name: '王小虎1',
              temp_type_name: '模板一'
            }, {

              temp_name: '王小虎2',
              temp_type_name: '模板一 2 弄'
            }, {

              temp_name: '王小虎3',
              temp_type_name: '模板一 3 弄'
            }, {
              temp_name: '王小虎4',
              temp_type_name: '模板一 4 弄'
            }]
          },
          downloadList_dialog: {
            dialogTableVisible: false
          }
        },
        dict: {
          prodCode: [],
          runStat: []
        }
      }
    },
    mounted() {
      // 初始化调用
      this.init()
    },
    methods: {
      init: function() {
        kk.k_load_exeid('file', 'SELECTPRODINFOWITHDOC').then(rep => {
          this.dict.prodCode = rep.rows
        })

        kk.k_load_dict(this, 'runStat', 't8_prod_state')

        /* 加载表格数据*/
        this.table.prod_doc_table.nowPage = 1
        kk.k_load_table(this, 'prod_doc_table', 'file')

      },
      search() { // 查询函数
       this.table.prod_doc_table.nowPage = 1
       kk.k_load_table(this, 'prod_doc_table', 'file')
      },
      //普通文档按钮事件
      PTDocument(item, index) {
        this.table.downloadList_dialog.dialogTableVisible = true
      },
      //中债文档按钮事件
      ZZDocument(item, index) {
      this.table.downloadList_dialog.dialogTableVisible = true
      },
      //分页
      handleCurrentChange(val) {
        this.table.prod_doc_table.nowPage = val
        kk.k_load_table(this, 'prod_doc_table', 'file')
      },
      resetForm() {
        this.table.prod_doc_table.run_stat = ''
        this.table.prod_doc_table.prod_code = ''
      },
      //selection选择事件
      handleSelectionChange(selection) {
        console.log(selection, '-----改变');
      },
      //下载
      download(row) {
        console.log(row);
      },
      //展示Echarts图表
      showEcharts(row) {
        console.log(row);
      },
      //批量下载
      batchDownload() {

      }
    }
  }
</script>

<style scoped>
  /*让文本可以被选中*/
  .venus-list-page {
    -moz-user-select: text;
    /*火狐*/
    -webkit-user-select: text;
    /*webkit浏览器*/
    -ms-user-select: text;
    /*IE10*/
    -khtml-user-select: text;
    /*早期浏览器*/
    user-select: text;
  }
</style>
